<template>
  <div class="van_picker_select">
    <van-field required :label="vanCellTitle" readonly is-link :value="vanCellName" arrow-direction="down" @click="showPicker"/>
    <div class="select_box" v-if="isShow">
      <van-overlay z-index="100" :show="isShow">
        <div class="van-picker">
          <van-picker
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirm"
            confirm-button-text="确定"
            cancel-button-text="取消"
            show-toolbar="true"
            toolbar-position="top"
          />
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      vanCellTitle: '',
      columns: []
    },
    data () {
      return {
        vanCellVale: '',
        vanCellName: ''
      }
    },
    methods: {
      showPicker () {
        this.isShow = true
      },
      hiddenPicker () {
        this.isShow = false
      },
      onChange () {
        this.$emit('onChange')
      },
      onConfirm (e) {
        this.isShow = false
        this.vanCellName = e.target.value.text
        this.vanCellVale = e.target.value.value
        this.$emit('onConfirm', this.vanCellVale)
      },
      onCancel () {
        this.isShow = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .select_box {
    .van-picker {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 1000;
      background: white;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
    }
  }
</style>

<style>
  .van-cell__value {
    flex: 2 !important;
    text-align: left !important;
  }
</style>
